<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax 获取数据</title>
    <script src="../vue.js"></script>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body style="display:none">
<!--v-on:submit.prevent 表单提交阻止默认行为-->
<div id="app">
    <ul>
        <button @click="submit">获取数据</button>
        <li v-for="item in list.list">
            <!--三元表达式-->
            <span>{{ item.content }}</span>
        </li>
    </ul>
</div>
<script type="text/javascript">
    console.log(new Date().getTime());
    console.log('我开始渲染了');
    new Vue({
        el:'#app',
        data:{list:[]},
        methods:{
            submit:function () {
                _this = this;
                $.post('http://api.he29.com/api/twitter/find', function(data) {
                    console.log(data);
                    _this.list = data;
                });
            }
        },
        //实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，
        created:function () {
            console.log('created');
            $('body').fadeIn(100);
            console.log('我已经全部渲染完了');
            console.log(new Date().getTime());
        },
        beforeUpdate:function () {
            console.log('beforeUpdate');
        }
    })
</script>
</body>
</html>